<template>
	<!-- 选择取餐方式 -->
	<view>
		<view class="hade_select">
			<view class="hade_select_top">
				<view class="hade_select_top_zq">
					<view class="hade_select_top_zq_right" :class="{select_item:select_type==2}" @tap="selectfun(2)">
						<view class="hade_select_top_zq_right_img f_zj">
							<image class="kd" src="../../static/order/kd.png" mode=""></image>
						</view>
						<text>现在支付</text>
					</view>
					<view class="hade_select_top_zq_left f_j" :class="{select_item:select_type==1}" @tap="selectfun(1)">
						<view class="hade_select_top_zq_left_img f_zj">
							<image class="zq" src="../../static/order/zq.png" mode=""></image>
						</view>
						<text>自取支付</text>
					</view>
					<view class="hade_select_top_zq_last" :class="{select_item:select_type==3}" @tap="selectfun(3)">
						<view class="hade_select_top_zq_right_img f_zj">
							<image class="kd" src="../../static/order/df.png" mode=""></image>
						</view>
						<text>货到支付</text>
					</view>
				</view>
			</view>
			<!-- <view class="hade_select_down" v-if="select_type==2">
				<view class="hade_select_top_zq">
					<view class="hade_select_top_zq_left" @tap="selectfun(1)">
						<view class="hade_select_top_zq_left_img f_zj">
							<image class="zq" src="../../static/order/zq.png" mode=""></image>
						</view>
						<text>自取</text>
					</view>
					<view class="hade_select_top_zq_right">
						<view class="hade_select_top_zq_right_img f_zj">
							<image class="kd" src="../../static/order/kd.png" mode=""></image>
						</view>
						<text>配送</text>
					</view>
					<view class="hade_select_top_zq_right" @tap="selectfun(3)">
						<view class="hade_select_top_zq_right_img f_zj">
							<image class="kd" src="../../static/order/df.png" mode=""></image>
						</view>
						<text>到付</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="hade_select_down" v-if="select_type==3">
				<view class="hade_select_top_zq">
					<view class="hade_select_top_zq_left" @tap="selectfun(1)">
						<view class="hade_select_top_zq_left_img f_zj">
							<image class="zq" src="../../static/order/zq.png" mode=""></image>
						</view>
						<text>自取</text>
					</view>
					<view class="hade_select_top_zq_right" @tap="selectfun(2)">
						<view class="hade_select_top_zq_right_img f_zj">
							<image class="kd" src="../../static/order/kd.png" mode=""></image>
						</view>
						<text>配送</text>
					</view>
					<view class="hade_select_top_zq_right">
						<view class="hade_select_top_zq_right_img f_zj">
							<image class="kd" src="../../static/order/df.png" mode=""></image>
						</view>
						<text>到付</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "select",
		props: ['select_type'],
		data() {
			return {
				select: uni.getStorageSync('option')
			};
		},
		mounted() {
			console.log(this.select_type, '父组件')
		},
		created() {
			console.log(uni.getStorageSync('option'), '组件取餐方式');
		},
		methods: {
			selectfun(count) {
				// this.select = count
				this.$emit('select_check', count)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hade_select {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow: hidden;

		.zq {
			width: 34rpx;
			height: 33rpx;
		}

		.kd {
			width: 40rpx;
			height: 33rpx;
		}

		.hade_select_top {
			.hade_select_top_zq {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #F2F2F2;

				.select_item {
					background: #FFFFFF;
				}

				.hade_select_top_zq_left {
					width: 60%;
					height: 90rpx;
					// background: linear-gradient(-100deg, transparent 20rpx, #ffffff 0) top right;
					display: flex;
					align-items: center;
					justify-content: center;

					.hade_select_top_zq_left_img {
						width: 50rpx;
						height: 50rpx;
						padding-right: 10rpx;
					}
				}

				.hade_select_top_zq_right {
					width: 50%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.hade_select_top_zq_right_img {
						width: 50rpx;
						height: 50rpx;
						padding-right: 10rpx;
					}
				}

				.hade_select_top_zq_last {
					width: 50%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.hade_select_top_zq_right_img {
						width: 50rpx;
						height: 50rpx;
						padding-right: 10rpx;
					}
				}
			}
		}

		.hade_select_down {
			.hade_select_top_zq {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #F2F2F2;

				.hade_select_top_zq_left {
					width: 50%;
					height: 90rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					.hade_select_top_zq_left_img {
						width: 50rpx;
						height: 50rpx;
						padding-right: 10rpx;
					}
				}

				.hade_select_top_zq_right {
					width: 60%;
					height: 90rpx;
					// background: linear-gradient(100deg, transparent 20rpx, #ffffff 0) top left;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;

					.hade_select_top_zq_right_img {
						width: 50rpx;
						height: 50rpx;
						padding-right: 10rpx;
					}
				}
			}
		}


	}
</style>